<template>
  <el-form :model="formData" label-width="0" class="desc-music-form" ref="descFormRef">
    <Title title="音乐名称" required>
      <el-form-item
        class="!mb-0"
        prop="title"
        :rules="[{ required: true, message: '请输入音乐名称', trigger: 'blur' }]"
      >
        <el-input
          class="music-ai-input"
          v-model="formData.title"
          placeholder="请输入音乐名称"
          maxlength="30"
        />
      </el-form-item>
    </Title>
    <Title title="描述" desc="建议描述风格、氛围、乐器等，丰富内容更易生成优质音乐" required>
      <el-form-item
        class="!mb-0"
        prop="prompt"
        :rules="[{ required: true, message: '请输入音乐描述', trigger: 'blur' }]"
      >
        <el-input
          class="music-ai-input"
          v-model="formData.prompt"
          type="textarea"
          :rows="4"
          maxlength="1000"
          show-word-limit
          placeholder="请输入音乐描述，如：创作一首带有轻松吉他旋律的流行音乐..."
        />
      </el-form-item>
    </Title>
    <Title title="曲风">
      <el-select
        class="music-ai-input"
        v-model="formData.genre"
        multiple
        filterable
        placeholder="请选择曲风"
        style="width: 100%"
      >
        <el-option
          v-for="item in genreOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </Title>
    <Title title="情绪">
      <el-select
        class="music-ai-input"
        v-model="formData.mood"
        multiple
        filterable
        placeholder="请选择情绪"
        style="width: 100%"
      >
        <el-option
          v-for="item in moodOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </Title>
    <Title title="乐器">
      <el-select
        class="music-ai-input"
        v-model="formData.instrument"
        multiple
        filterable
        placeholder="请选择乐器"
        style="width: 100%"
      >
        <el-option
          v-for="item in instrumentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </Title>
    <Title title="主题">
      <el-select
        class="music-ai-input"
        v-model="formData.theme"
        multiple
        filterable
        placeholder="请选择主题"
        style="width: 100%"
      >
        <el-option
          v-for="item in themeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </Title>
    <Title title="时长" desc="生成指定音频时长，生效范围[1，60]">
      <el-input-number v-model="formData.duration" :min="1" :max="60" />
      <span class="ml-2">秒</span>
    </Title>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, defineExpose } from 'vue'
import Title from '../title/index.vue'

const genreOptions = [
  { value: 'corporate', label: '企业' },
  { value: 'dance/edm', label: '舞蹈/电子舞曲' },
  { value: 'orchestral', label: '管弦乐' },
  { value: 'chill out', label: '轻松' },
  { value: 'rock', label: '摇滚' },
  { value: 'hip hop', label: '嘻哈' },
  { value: 'folk', label: '民谣' },
  { value: 'funk', label: '放克' },
  { value: 'ambient', label: '氛围音乐' },
  { value: 'holiday', label: '假期' },
  { value: 'jazz', label: '爵士乐' },
  { value: 'kids', label: '童乐' },
  { value: 'world', label: '世界' },
  { value: 'travel', label: '旅行' },
  { value: 'commercial', label: '商业的' },
  { value: 'advertising', label: '广告营销' },
  { value: 'driving', label: '驾驶' },
  { value: 'cinematic', label: '电影' },
  { value: 'upbeat', label: '乐观的' },
  { value: 'epic', label: '史诗' },
  { value: 'inspiring', label: '鼓舞人心的' },
  { value: 'business', label: '商业' },
  { value: 'video game', label: '视频游戏' },
  { value: 'dark', label: '黑暗的' },
  { value: 'pop', label: '流行音乐' },
  { value: 'trailer', label: '预告片' },
  { value: 'modern', label: '现代的' },
  { value: 'electronic', label: '电子的' },
  { value: 'documentary', label: '记录' },
  { value: 'soundtrack', label: '原声带' },
  { value: 'fashion', label: '时尚' },
  { value: 'acoustic', label: '自然声' },
  { value: 'movie', label: '电影' },
  { value: 'tv', label: '电视' },
  { value: 'high tech', label: '高科技' },
  { value: 'industrial', label: '工业的' },
  { value: 'dance', label: '舞蹈' },
  { value: 'video', label: '视频' },
  { value: 'vlog', label: '视频博客' },
  { value: 'marketing', label: '营销' },
  { value: 'game', label: '游戏' },
  { value: 'radio', label: '收音机' },
  { value: 'promotional', label: '促销' },
  { value: 'sports', label: '运动的' },
  { value: 'party', label: '派对' },
  { value: 'summer', label: '夏天' },
  { value: 'beauty', label: '美丽' }
]
const moodOptions = [
  { value: 'positive', label: '积极的' },
  { value: 'uplifting', label: '令人振奋的' },
  { value: 'energetic', label: '精力充沛' },
  { value: 'happy', label: '快乐' },
  { value: 'bright', label: '明亮的' },
  { value: 'optimistic', label: '乐观的' },
  { value: 'hopeful', label: '充满希望的' },
  { value: 'cool', label: '酷' },
  { value: 'dreamy', label: '梦幻般的' },
  { value: 'fun', label: '乐趣' },
  { value: 'light', label: '轻音乐' },
  { value: 'powerful', label: '强力的' },
  { value: 'calm', label: '冷静的' },
  { value: 'confident', label: '自信的' },
  { value: 'joyful', label: '喜悦' },
  { value: 'dramatic', label: '戏剧性' },
  { value: 'peaceful', label: '平静的' },
  { value: 'playful', label: '俏皮的' },
  { value: 'soft', label: '轻柔' },
  { value: 'groovy', label: '时髦的' },
  { value: 'reflective', label: '反省性的' },
  { value: 'easy', label: '简单的' },
  { value: 'relaxed', label: '轻松' },
  { value: 'lively', label: '活泼' },
  { value: 'smooth', label: '平滑的' },
  { value: 'romantic', label: '浪漫的' },
  { value: 'intense', label: '激烈的' },
  { value: 'elegant', label: '优雅的' },
  { value: 'mellow', label: '醇厚' },
  { value: 'emotional', label: '情绪化的' },
  { value: 'sentimental', label: '多愁善感的' },
  { value: 'cheerful happy', label: '开朗快乐' },
  { value: 'contemplative', label: '沉思的' },
  { value: 'soothing', label: '舒缓的' },
  { value: 'proud', label: '自豪的' },
  { value: 'passionate', label: '热情' },
  { value: 'sweet', label: '甜蜜' },
  { value: 'mystical', label: '神秘' },
  { value: 'tranquil', label: '宁静' },
  { value: 'cheerful', label: '令人愉快的' },
  { value: 'casual', label: '随意的' },
  { value: 'beautiful', label: '美丽的' },
  { value: 'ethereal', label: '空灵的' },
  { value: 'melancholy', label: '忧郁的' },
  { value: 'sad', label: '伤心' },
  { value: 'aggressive', label: '挑衅的' },
  { value: 'haunting', label: '令人难以忘怀的' },
  { value: 'adventure', label: '冒险' },
  { value: 'serene', label: '安详' },
  { value: 'sincere', label: '真诚' },
  { value: 'funky', label: '节奏强适宜跳舞的' },
  { value: 'funny', label: '搞笑' }
]
const themeOptions = [
  { value: 'inspirational', label: '灵感' },
  { value: 'motivational', label: '激励' },
  { value: 'achievement', label: '成就' },
  { value: 'discovery', label: '发现' },
  { value: 'every day', label: '日常' },
  { value: 'love', label: '爱情' },
  { value: 'technology', label: '科技' },
  { value: 'lifestyle', label: '生活方式' },
  { value: 'journey', label: '旅行' },
  { value: 'meditation', label: '冥想' },
  { value: 'drama', label: '戏剧' },
  { value: 'children', label: '儿童' },
  { value: 'hope', label: '希望' },
  { value: 'fantasy', label: '幻想' },
  { value: 'holiday', label: '假日' },
  { value: 'health', label: '健康' },
  { value: 'family', label: '家庭' },
  { value: 'real estate', label: '房地产' },
  { value: 'media', label: '媒体' },
  { value: 'kids', label: '儿童' },
  { value: 'science', label: '科学' },
  { value: 'education', label: '教育' },
  { value: 'progress', label: '进步' },
  { value: 'world', label: '世界' },
  { value: 'vacation', label: '度假' },
  { value: 'training', label: '培训' },
  { value: 'christmas', label: '圣诞' },
  { value: 'sales', label: '销售' }
]
const instrumentOptions = [
  { value: 'piano', label: '钢琴' },
  { value: 'drums', label: '鼓' },
  { value: 'guitar', label: '吉他' },
  { value: 'percussion', label: '打击乐器' },
  { value: 'synth', label: '合成器' },
  { value: 'electric guitar', label: '电吉他' },
  { value: 'acoustic guitar', label: '民谣吉他' },
  { value: 'bass guitar', label: '低音吉他' },
  { value: 'brass', label: '铜管乐器' },
  { value: 'violin', label: '小提琴' },
  { value: 'cello', label: '大提琴' },
  { value: 'flute', label: '长笛' },
  { value: 'organ', label: '风琴' },
  { value: 'trumpet', label: '小号' },
  { value: 'ukulele', label: '尤克里里' },
  { value: 'saxophone', label: '萨克斯' },
  { value: 'double bass', label: '低音提琴' },
  { value: 'harp', label: '竖琴' },
  { value: 'glockenspiel', label: '钟琴' },
  { value: 'synthesizer', label: '（电子）合成器' },
  { value: 'keyboard', label: '键盘乐器' },
  { value: 'marimba', label: '马林巴琴' },
  { value: 'bass', label: '贝斯' },
  { value: 'banjo', label: '班卓琴' },
  { value: 'strings', label: '弦乐器' }
]

const formData = reactive({
  generateMode: 1, // 1-描述模式
  title: '',
  prompt: '',
  genre: [] as string[],
  mood: [] as string[],
  instrument: [] as string[],
  theme: [] as string[],
  duration: 30,
  makeInstrumental: true // 是否生成纯音乐
})
const setFormData = (data) => {
  formData.prompt = data.prompt || ''
  formData.title = data.title || ''
  console.log(formData, '----formData')
}
const descFormRef = ref()

function validate() {
  return descFormRef.value?.validate?.() ?? true
}

defineExpose({ formData, validate, setFormData })
</script>

<style lang="scss" scoped>
.desc-music-form {
  padding: 0 10px;
}

.music-ai-input {
  overflow: hidden;
  background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(90deg, #bc9eff 0%, #8b9bff 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;

  :deep() {
    .el-input__count {
      font-size: 12px;
      color: #8a8a8a;
    }

    .el-textarea__inner {
      &::placeholder {
        font-size: 14px;
        color: #8a8a8a;
      }
    }
  }
}
</style>
